import React, { useEffect, useState } from 'react';
import { Divider } from 'antd';
import { Button, Select, Form, Input, Row, Col, Space, notification } from 'antd';
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';
import { useNavigate } from 'react-router-dom';
import Index from '../../../../api/Inedx';
import "./AddResident.scss"
interface Props { }
function AddResident(props: Props) {
    let navigate = useNavigate()
    let [userTag, setUsertag]: any = useState([])



    let onFinish = async (value: any) => {
        console.log(value);
        let res = await Index.Resident.AddResident(value)
        navigate("/index/resident")
        console.log(res);
        if (res.data.code === "200") {
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "新增失败!" })

        }

    }
    let onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    let getUsertag = async () => {//获取居民标签列表
        let res = await Index.Resident.GetUserTag()
        console.log(res);
        let arr = res.data.data.map((item: any) => {
            return { value: item.rtId, label: item.rtName }
        })
        // console.log(arr);

        setUsertag(arr)
    }
    

    useEffect(()=>{
        getUsertag()
    },[])

    return (
        <div className='addresident'>
            <div className='title'>新建居民档案</div>
            <Divider />
            <div className='title2'>居民信息</div>

            <Form onFinish={(value) => { onFinish(value) }}>
                <Row gutter={[16, 16]}>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="姓名"
                            name="residentName"
                            rules={[{ required: true, message: '请输入姓名' }]}
                        >
                            <Input placeholder='请输入' />
                        </Form.Item>

                    </Col>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="身份证号"
                            name="residentNumber"
                            rules={[{ required: true, message: '请输入身份证号' ,pattern:/^(\d{18,18}|\d{15,15}|\d{17,17}x)/}]}
                        >
                            <Input placeholder='请输入' />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="性别"
                            name="residentGender"
                            rules={[{ required: true, message: '请选择性别' }]}
                        >
                            <Select
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={[
                                    { value: "男", label: '男' },
                                    { value: "女", label: '女' },
                                ]}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={[16, 16]}>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="出生日期"
                            name="residentBrith"
                            rules={[{ required: true, message: '请输入日期' }]}
                        >
                            <DatePicker onChange={onChange} placeholder="请输入日期" />
                        </Form.Item>

                    </Col>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="手机号码"
                            name="residentPhone"
                            rules={[{ required: true, message: '请输入手机号',pattern:/^1[3456789]\d{9}$/ }]}
                        >
                            <Input placeholder='居民登录账号,请正确填写' />
                        </Form.Item>
                    </Col>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="现居地"
                            name="residentNowAddress"
                        >
                            <Input placeholder='请输入' />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={[16, 16]}>
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="居民标签"
                            name="rtId"
                        >
                            <Select
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={userTag}
                            />
                        </Form.Item>
                    </Col>
                    {/* <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="居民状态"
                            name="userStatus"
                            rules={[{ required: true, message: '请选择是否启用' }]}
                        >
                            <Select
                                placeholder="请选择"
                                style={{ width: 200 }}
                                options={[
                                    { value: true, label: '启用' },
                                    { value: false, label: '不启用' },
                                ]}
                            />
                        </Form.Item>
                    </Col> */}
                    <Col className="gutter-row" span={8}>
                        <Form.Item
                            label="登录密码"
                            name="residentPassword"
                            rules={[{ required: true, message: '请输入密码' ,pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/}]}
                        >
                            <Input placeholder='8位以上的数字和字母组合' />
                        </Form.Item>
                    </Col>
                </Row>

                <Divider />
                <Form.Item>
                    <Space>
                        <Button type='primary' htmlType='submit'>保存</Button>
                        {/* <Button type='primary' onClick={() => { navigate("/index/perfectdatas") }}>完善居民档案</Button> */}
                        <Button type='primary'>立即签约</Button>
                        <Button type='primary' onClick={() => { navigate(-1) }}>返回</Button>
                    </Space>
                </Form.Item>
            </Form>
        </div>
    );
}

export default AddResident;